import { StyleSheet } from 'react-native';
import { phonePx } from '../../../../../../util/adapt';
import { CLASS_ROOM_RIGHT_SCALE } from '../../../../constant';

export default StyleSheet.create({
  kid: {
    position: 'absolute',
    left: phonePx(4) * CLASS_ROOM_RIGHT_SCALE,
    bottom: phonePx(36) * CLASS_ROOM_RIGHT_SCALE,
    width: phonePx(152) * CLASS_ROOM_RIGHT_SCALE,
    height: phonePx(74) * CLASS_ROOM_RIGHT_SCALE,
    borderRadius: phonePx(4) * CLASS_ROOM_RIGHT_SCALE,
    backgroundColor: '#ffffff',
    flexDirection: 'row',
    alignItems: 'center'
  },
  corner: {
    position: 'absolute',
    left: 0,
    top: 0
  },
  live: {
    width: phonePx(66) * CLASS_ROOM_RIGHT_SCALE,
    height: phonePx(66) * CLASS_ROOM_RIGHT_SCALE,
    marginLeft: phonePx(4) * CLASS_ROOM_RIGHT_SCALE
  },
  video: {
    width: phonePx(66) * CLASS_ROOM_RIGHT_SCALE,
    height: phonePx(66) * CLASS_ROOM_RIGHT_SCALE
  },
  info: {
    width: phonePx(70) * CLASS_ROOM_RIGHT_SCALE,
    height: phonePx(66) * CLASS_ROOM_RIGHT_SCALE,
    marginLeft: phonePx(8) * CLASS_ROOM_RIGHT_SCALE
  },
  name: {
    color: '#3E3E3E',
    fontSize: phonePx(10) * CLASS_ROOM_RIGHT_SCALE,
    lineHeight: phonePx(14) * CLASS_ROOM_RIGHT_SCALE,
    fontWeight: '500',
    width: phonePx(70) * CLASS_ROOM_RIGHT_SCALE
  },
  coinContent: {
    height: phonePx(10) * CLASS_ROOM_RIGHT_SCALE,
    marginTop: phonePx(4) * CLASS_ROOM_RIGHT_SCALE,
    flexDirection: 'row',
    alignItems: 'center'
  },
  coin: {
    width: phonePx(10) * CLASS_ROOM_RIGHT_SCALE,
    height: phonePx(10) * CLASS_ROOM_RIGHT_SCALE
  },
  number: {
    marginLeft: phonePx(2) * CLASS_ROOM_RIGHT_SCALE,
    color: '#2A2A2A',
    fontSize: phonePx(10) * CLASS_ROOM_RIGHT_SCALE,
    fontWeight: '500'
  },
  coinProgress: {
    height: phonePx(14) * CLASS_ROOM_RIGHT_SCALE,
    marginTop: phonePx(8) * CLASS_ROOM_RIGHT_SCALE,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: phonePx(70) * CLASS_ROOM_RIGHT_SCALE
  },
  desc: {
    color: '#3E3E3E',
    fontSize: phonePx(10) * CLASS_ROOM_RIGHT_SCALE
  },
  progressDesc: {
    color: '#A2A7AD',
    fontSize: phonePx(10) * CLASS_ROOM_RIGHT_SCALE
  },
  progress: {
    width: phonePx(70) * CLASS_ROOM_RIGHT_SCALE,
    height: phonePx(10) * CLASS_ROOM_RIGHT_SCALE,
    marginTop: phonePx(4) * CLASS_ROOM_RIGHT_SCALE,
    borderRadius: phonePx(5) * CLASS_ROOM_RIGHT_SCALE,
    overflow: 'hidden',
    justifyContent: 'center'
  },
  content: {
    width: phonePx(70) * CLASS_ROOM_RIGHT_SCALE,
    height: phonePx(10) * CLASS_ROOM_RIGHT_SCALE,
    borderRadius: phonePx(5) * CLASS_ROOM_RIGHT_SCALE,
    backgroundColor: '#ffffff',
    borderColor: '#E8E8E8',
    borderWidth: phonePx(1) * CLASS_ROOM_RIGHT_SCALE
  },
  progressContent: {
    position: 'absolute',
    top: 0,
    height: phonePx(10) * CLASS_ROOM_RIGHT_SCALE,
    width: phonePx(70) * CLASS_ROOM_RIGHT_SCALE,
    borderRadius: phonePx(5) * CLASS_ROOM_RIGHT_SCALE,
    backgroundColor: '#FDD753'
  },
  gray: {
    backgroundColor: '#A2A7AD'
  },
  location: {
    position: 'absolute',
    left: phonePx(25) * CLASS_ROOM_RIGHT_SCALE,
    width: phonePx(10) * CLASS_ROOM_RIGHT_SCALE,
    height: phonePx(10) * CLASS_ROOM_RIGHT_SCALE
  },
  getCoin: {
    left: phonePx(143) * CLASS_ROOM_RIGHT_SCALE,
    top: phonePx(58) * CLASS_ROOM_RIGHT_SCALE
  },
  problem: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(42, 42, 42, .6)',
    alignItems: 'center',
    justifyContent: 'center'
  },
  problemDesc: {
    color: '#FFFFFF',
    fontSize: phonePx(10) * CLASS_ROOM_RIGHT_SCALE,
    fontWeight: '500'
  },
  noFaceContent: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(42, 42, 42, .7)',
    alignItems: 'center',
    justifyContent: 'center'
  },
  noFace: {
    width: phonePx(60) * CLASS_ROOM_RIGHT_SCALE,
    height: phonePx(52) * CLASS_ROOM_RIGHT_SCALE
  },
  noFaceDesc: {
    color: '#FFFFFF',
    fontSize: phonePx(8)
  },
  instantCoin: {
    left: phonePx(24),
    top: phonePx(24)
  }
});
